<template>
<div class="image-grid">
    <!-- 返回按钮 -->
    <button class="back-button" @click="goBack">返回</button>

    <div class="row" v-for="(item, index) in items" :key="index">
      <div class="image-item" v-for="(img, idx) in item" :key="idx">
        <img :src="img.src" :alt="img.equipmentName" />
        <div class="info">
          <h3>{{ img.equipmentName }}</h3>
          <p>{{ img.description }}</p>
        </div>
      </div>
    </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        
        [
          { src: require('@/assets/img/treadmill.jpg'), alt: '跑步机', equipmentName: '跑步机', description: '用于有氧运动，提高心肺功能和耐力。' },
          { src: require('@/assets/img/spin-bike.jpg'), alt: '动感单车', equipmentName: '动感单车', description: '用于高强度间歇训练，增强心肺功能。' },
          { src: require('@/assets/img/elliptical.jpg'), alt: '椭圆机', equipmentName: '椭圆机', description: '提供低冲击的有氧运动，减少关节压力。' },
          { src: require('@/assets/img/leg-press.jpg'), alt: '腿举机', equipmentName: '腿举机', description: '专门针对腿部肌肉的力量训练。' },
          { src: require('@/assets/img/power-rack.jpg'), alt: '深蹲架', equipmentName: '深蹲架', description: '用于进行深蹲和举重训练，提供安全保障。' },
         
        ],
        
        [
          
          { src: require('@/assets/img/dumbbell.jpg'), alt: '哑铃', equipmentName: '哑铃', description: '提供多功能的力量训练，适合各种肌肉群。' },
          { src: require('@/assets/img/weight-plates.jpg'), alt: '杠铃片', equipmentName: '杠铃片', description: '用于增加杠铃的重量，进行力量训练。' },
          { src: require('@/assets/img/smith-machine.jpg'), alt: '史密斯机', equipmentName: '史密斯机', description: '提供固定轨迹的力量训练，适合初学者。' },
          { src: require('@/assets/img/bench.jpg'), alt: '健身椅', equipmentName: '健身椅', description: '配合杠铃或哑铃，进行多种力量训练动作。' },
          { src: require('@/assets/img/resistance-band.jpg'), alt: '拉伸带', equipmentName: '拉伸带', description: '用于力量训练和灵活性训练，适合各种水平的锻炼者。' },
          
        ],
        
        [
          { src: require('@/assets/img/yoga-mat.jpg'), alt: '瑜伽垫', equipmentName: '瑜伽垫', description: '用于瑜伽和普拉提，提供舒适的练习表面。' },
          { src: require('@/assets/img/swiss-ball.jpg'), alt: '瑞士球', equipmentName: '瑞士球', description: '用于核心训练和平衡练习，提高稳定性和灵活性。' },
          { src: require('@/assets/img/foam-roller.jpg'), alt: '泡沫轴', equipmentName: '泡沫轴', description: '用于肌肉放松和恢复，缓解肌肉紧张。' },
          { src: require('@/assets/img/medicine-ball.jpg'), alt: '药球', equipmentName: '药球', description: '用于功能性训练，提高爆发力和核心稳定性。' },
          { src: require('@/assets/img/jump-box.jpg'), alt: '跳箱', equipmentName: '跳箱', description: '用于增强下肢力量和爆发力。' }, 
          
        ],
      [
          { src: require('@/assets/img/barbell.jpg'), alt: '杠铃', equipmentName: '杠铃', description: '用于力量训练，增强肌肉力量和体积。' },
          { src: require('@/assets/img/massage-gun.jpg'), alt: '按摩枪', equipmentName: '按摩枪', description: '用于深层肌肉放松和恢复，缓解肌肉疼痛。' },
          { src: require('@/assets/img/step-mill.jpg'), alt: '台阶器', equipmentName: '台阶器', description: '模拟爬楼梯动作，提高心肺功能和下肢力量。' },
          { src: require('@/assets/img/rowing-machine.jpg'), alt: '划船机', equipmentName: '划船机', description: '模拟水上划船动作，锻炼全身肌肉。' },
          { src: require('@/assets/img/pull-up-bar.jpg'),alt: "龙门架",equipmentName: '龙门架',description: '多功能健身设备，可用于引体向上、卧推等多种锻炼动作，增强上肢力量和核心力量.'}
        ],
       
      ],
    };
  },
  methods: {
    goBack() {
      this.$router.push('/equipment');
    },
  },
};
</script>

<style scoped>
.image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列 */
  grid-template-rows: repeat(5, auto); /* 5行 */
  gap: 20px; /* 间距增加到20px */
  padding: 20px; /* 四周留白 */
  background-image: url('@/assets/img/main.jpg'); /* 添加背景图 */
  background-size: cover; /* 背景图覆盖整个容器 */
  background-position: center; /* 背景图居中显示 */
  color: #fff; /* 设置字体颜色为白色 */
}

.back-button {
  position: fixed; /* 固定定位 */
  left: 20px; /* 距离左边20px */
  bottom: 20px; /* 距离底部20px */
  padding: 20px 40px; /* 按钮内边距增大一倍 */
  background-color: #fff; /* 按钮背景颜色 */
  border: none; /* 无边框 */
  border-radius: 10px; /* 圆角边框 */
  cursor: pointer; /* 鼠标手型 */
  font-size: 16px; /* 字体大小 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* 按钮阴影 */
  z-index: 10; /* 确保按钮在最上层 */
}

.image-item {
  width: 100%; /* 每个图片组占满分配的宽度 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-item img {
  width: 200px; /* 设置图片的固定宽度 */
  height: 300px; /* 设置图片的固定高度 */
  object-fit: cover; /* 图片自适应容器，保持宽高比 */
}

.info {
  text-align: center; /* 文本居中 */
  margin-top: 10px; /* 与图片间隔增加到10px */
}

.info h3 {
  margin: 0; /* 标题无外边距 */
  font-size: 16px; /* 标题字体大小 */
}

.info p {
  margin: 5px 0; /* 段落外边距 */
  font-size: 14px; /* 段落字体大小 */
}
</style>